<template>
  <el-dialog
    title="修改设备"
    :visible="ChangeVisible"
    width="40%"
    @close="cancel"
    @opened="opened"
  >
    <el-form :label-position="labelPosition" label-width="100px" v-model="changeForm">
      <el-form-item label="机器编号：">{{ changeScope.innerCode }}</el-form-item>
      <el-form-item label="供货时间：">{{  changeScope.lastSupplyTime?.split('T').join(' ').split('-').join('.') }}</el-form-item>
      <el-form-item label="设备类型：">{{ changeScope.type?.name }}</el-form-item>
      <el-form-item label="设备容量：">{{ changeScope.type?.channelMaxCapacity }}</el-form-item>
      <el-form-item label="设备点位：">
        <el-select placeholder="请选择" v-model="changeForm.node">
          <el-option v-for="item in changeForm.currentPageRecords" :key="item.id" :label="item.name" :value="item.name"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="合作商：">{{ changeScope.ownerName }}</el-form-item>
      <el-form-item label="所属区域：">{{ changeScope.region?.name }}</el-form-item>
      <el-form-item label="设备地址：">{{ changeScope.node?.name }}</el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getVmNodeSearch, ChangeVmTypeNode } from '@/api/Equipment'
export default {
  props: {
    ChangeVisible: {
      type: Boolean,
      required: true,
      default: false
    },
    changeScope: {
      type: Object,
      required: true,
      default: null
    },
    //  查找点位
    TypeData: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      changeForm: {
        node: '',
        currentPageRecords: []
      },
      labelPosition: 'right',
      // 传过去的参数
      change: {
        id: '',
        nodeId: ''
      }
    }
  },
  methods: {
    cancel () {
      this.$emit('update:ChangeVisible', false)
    },
    async submit () {
      await ChangeVmTypeNode(this.change)
      this.$emit('searchType')
      this.cancel()
      // console.log(this.change)
    },
    async opened () {
      // 获取页面数据 选择点位
      const { data } = await getVmNodeSearch({ pageIndex: 1, pageSize: 100000 })
      // console.log(data)
      this.changeForm.currentPageRecords = data.currentPageRecords
      // 赋值点位信息 修改下拉选择
      this.changeForm.node = this.changeScope.node.name

      // 售货机 id
      this.change.id = this.changeScope.id
      // console.log(this.change.id)
    }
  },
  watch: {
    changeForm: {
      deep: true,
      handler () {
        // 获取点位信息 id
        this.change.nodeId = this.TypeData.find(item => item.node.name === this.changeForm.node).nodeId
        // console.log(r.node.name)
        // console.log(this.change.nodeId)
      }
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-dialog {
  .el-dialog__body {
    padding: 30px 20px;
  }
  .el-form-item {
    padding: 0 50px
  }
  .el-dialog__title {
    font-size: 16px;
  }
  .el-select {
  width: 360px;
}
}
</style>
